<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demo for sticky header">
	<meta name="keywords" content="web, js demo, jQuery plugin, jQuery widget, html, mobile">
	<meta name="author" content="Steper Kuo">
	<title>Demo: sticky header</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<link rel="stylesheet" href="styles/grid.css" type="text/css">
	<link rel="stylesheet" href="https://gyx8899.github.io/YX-WebThemeKit/theme-header-footer/owl/owl.css" type="text/css">
	<link rel="stylesheet" href="styles/header.css" type="text/css">
	<link rel="stylesheet" href="styles/hamburger.css" type="text/css">

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div data-toggle="previewCode" data-target="#demoWrap">
			<div class="header">
				<div class="container">
					<div class="header-container">
						<ul class="header-left">
							<li>
								<a href="/" class="logo"></a>
							</li>
						</ul>
						<ul class="header-right">
							<li>
								<a href="/" class="nav-item selected">
									<span class="text-label">Shows</span>
								</a>
							</li>
							<li>
								<a href="/home" class="nav-item">
									<span class="text-label">Featured</span>
								</a>
							</li>
							<li>
								<a href="javascript: void(0);" id="nav-more" class="nav-item" data-toggle="popupDismiss" data-target="#item-more" data-toggle-class="open"></a>
								<div id="item-more">
									<div class="more-list">
										<a href="aboutus" class="more-item">
											About
										</a>
										<a href="tos" class="more-item">
											Terms of Use
										</a>
										<a href="privacy" class="more-item">
											Privacy Policy
										</a>
									</div>
								</div>
							</li>
						</ul>
						<div class="headerBtn fr">
							<ul class="hamburger fl" data-toggle="popupDismiss" data-target="#spNav" data-toggle-class="hamburger-close">
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<ul id="spNav" class="spNav">
				<li><a href="/" class="menuLink menuSel selected">Shows</a></li>
				<li><a href=/home" class="menuLink menuSel">Featured</a></li>
				<li><a href="/aboutus" class="menuLink menu-more">About</a></li>
				<li><a href="/tos" class="menuLink menu-more">Terms of Use</a></li>
				<li><a href="/pri" class="menuLink menu-more">Privacy policy</a></li>
			</ul>
			<div class="header-placeholder"></div>
		</div>
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js?ignore=headerFooter"></script>

<script data-toggle="previewCode" data-target="#demoWrap" data-fetch="file" type="text/javascript" src="scripts/sticky.js"></script>

</body>
</html>